

.box {
  width: 260px;
  height: 100px;
  background: linear-gradient(to bottom, red, blue);
  font-size: 40px;
  line-height: 100px;
  margin: 20px;
  color: #ffffff;
}
.translateX {
  transform: translateX(30px);
}
.scaleX {
  transform: scaleX(1.5);
}
.rotateZ {
  transform: rotateZ(30deg);
}
.rotateZ-origin {
  transform: rotateZ(30deg);
  transform-origin: left top;
}
.skewX {
  transform: skewX(30deg);
}


.transition1 {
  transition: width 2s ease 100ms;
}
.transition1:hover {
  width: 400px;
}
.transition2 {
  transition-property: width, height;
  transition-duration: 2s, 1s;
  transition-timing-function: linear, linear;
  transition-delay: 100ms, 1s;
}
.transition2:hover {
  width: 400px;
  height: 150px;
}

@keyframes anim {
  from {
    width: 260px;
  }
  to {
    width: 400px;
  }
}
.animation {
  animation: anim 2s ease 100ms 1;
}

@keyframes anim1 {
  0% {
    width: 260px;
  }
  50% {
    height: 100px;
  }
  100% {
    width: 400px;
    height: 150px;
  }
}
.animation1 {
  animation: anim1 2s linear 100ms infinite alternate running forwards;
}
.animation1:hover {
  animation-play-state: paused;
}
